import {observer} from 'mobx-react';
import React, {FC, useEffect} from 'react';
import {View, StyleSheet, ScrollView} from 'react-native';
import ArticleDetailStore from '../../stores/ArticleDetailStore';
import {useRoute} from '@react-navigation/native';
import {ArticleDetailRouteProp} from '../../../App';
import Title from './Title';
import Images from './Images';
import Info from './Info';
import Comments from './Comments';
import Bottom from './Bottom';
type PropsType = {};
const ArticleDetail: FC<PropsType> = observer(() => {
  const {params} = useRoute<ArticleDetailRouteProp>();
  useEffect(() => {
    ArticleDetailStore.requestArticleDetail(params.id);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return (
    <View style={styles.root}>
      <Title />
      <ScrollView
        style={styles.scrollView}
        showsVerticalScrollIndicator={false}>
        <Images />
        <Info />
        <Comments />
      </ScrollView>
      <Bottom />
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  scrollView: {
    flex: 1,
  },
  editLayout: {
    flexDirection: 'row',
  },
  txt: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold',
  },
});
export default ArticleDetail;
